import {reactive, ref} from "vue";
import array from "@/zdpui/js/array.js";
import random from "@/zdpui/util/random.js";

// 用于任务列表
const useTaskList = (apiGetAll) => {
    // 任务列表
    const tasks = ref([])
    // 加载中状态
    const loading = ref(false);
    // 加载数据
    const loadData = async () => {
        loading.value = true
        tasks.value = await apiGetAll()
        loading.value = false
    }
    return {
        tasks,
        loading,
        loadData,
    }
}

// 用于任务的tab切换
const useTaskTab = (tasks) => {
    // 当前tab对应的任务列表
    const tabTasks = ref([])
    // 所有的tab栏
    const tabs = [
        {label: '所有', name: 'all'},
        {label: '未开始', name: 'init'},
        {label: '进行中', name: 'start'},
        {label: '已完成', name: 'finish'},
        {label: '已删除', name: 'delete'},
    ];
    // 当tab改变的时候触发的方法
    const onTabChange = (index, tab) => {
        if (tab.name === 'all') {
            tabTasks.value = tasks.value
        } else {
            tabTasks.value = tasks.value.filter(task => task.status === tab.name)
        }
    };
    return {
        tabs,
        tabTasks,
        onTabChange,
    }
}

// 用于任务的状态管理
const useTaskForm = (
    tasks,
    apiAdd = null,
    apiUpdate = null,
    apiDelete = null,
) => {
    // 编辑任务索引
    const editIndex = ref(null)
    // 编辑任务
    const editTask = ref(null)
    // 表单数据
    const formData = reactive({
        name: "",
        content: "",
        status: "init", // init start finish delete rel_delete
    });
    // 点击任务
    const onTaskClick = (index, task) => {
        modalShow.value = true
        editIndex.value = index
        editTask.value = task
        formData.name = task.name
        formData.content = task.content
        formData.status = task.status
    }
    // 弹窗显示
    const modalShow = ref(false)
    // 下拉框选项列表
    const options = [
        {label: "未开始", value: "init"},
        {label: "进行中", value: "start"},
        {label: "已完成", value: "finish"},
        {label: "已删除", value: "delete"},
        {label: "直接移除", value: "rel_delete"},
    ]
    // 点击确认修改任务状态
    const onSaveTask = async () => {
        modalShow.value = false
        if (editIndex.value) {
            // 修改任务
            if (formData.status === "rel_delete") {
                array.remove(tasks.value, editIndex.value)
                if (apiDelete) await apiDelete(tasks.value[editIndex.value])
            } else {
                tasks.value[editIndex.value].status = formData.status
                if (apiUpdate) await apiUpdate(tasks.value[editIndex.value])
            }
        } else {
            // 添加任务
            const newTask = {
                id: random.id1(),
                ...formData,
            }
            array.insertFirst(tasks.value, newTask)
            if (apiAdd) await apiAdd(formData)
        }

        formData.name = ""
        formData.content = ""
        formData.status = "init"
    }

    return {
        editIndex,
        editTask,
        formData,
        onTaskClick,
        modalShow,
        options,
        onSaveTask,
    }
}

export default {
    useTaskList,
    useTaskTab,
    useTaskForm,
}